<template>
  <div id="app">
    <!-- 头部渲染 -->
    <HeaderBox></HeaderBox>
    <!-- 中间部分渲染 -->
    <CenterBox></CenterBox>
    <!-- 底部渲染 -->
    <FooterBox></FooterBox>
  </div>
</template>

<script>
import HeaderBox from "./components/HeaderBox.vue";
import CenterBox from "./components/CenterBox.vue";
import FooterBox from "./components/FooterBox.vue";


export default {
  name: "App",
  components: {
    HeaderBox,
    CenterBox,
    FooterBox,
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
html,body{
  height: 100%;
}
#app{
  height: 100%;
  display: flex;
  flex-direction: column;
}

</style>
